import React, { PureComponent } from 'react';
import { connect } from 'dva';
import Link from 'umi/link';
import { Card, Row, Col, Avatar, Tag, Divider, Spin, BackTop } from 'antd';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import styles from './Center.less';

@connect(({ loading, post }) => ({
  post,
  loading: loading.models.post,
  userLoading: loading.effects['post/fetchPostUser'],
}))
class Center extends PureComponent {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'post/fetchPostUser',
      payload: this.props.match.params.id
    });
  }

  render() {
    const {
      post: {user, total}, 
      userLoading,
      match,
      location,
      children,
    } = this.props;

    const operationTabList = [
      {
        key: 'articles',
        tab: (
          <span>
            文章列表 <span style={{ fontSize: 14 }}>({total})</span>
          </span>
        ),
      }
    ];

    return (
      <GridContent className={styles.userCenter}>
        <Row gutter={24}>
          <Col lg={7} md={24}>
            <Card bordered={false} style={{ marginBottom: 24 }} loading={userLoading}>
              {user && Object.keys(user).length ? (
                <div>
                  <div className={styles.avatarHolder}>
                    <img alt="" src={user.avatarLarge||user.avatarHd} />
                    <div className={styles.name}>{user.username}</div>
                    <div>{user.selfDescription}</div>
                  </div>
                  <div className={styles.detail}>
                    <p>
                      <i className={styles.title} />
                      {user.jobTitle}
                    </p>
                    <p>
                      <i className={styles.group} />
                      {user.company}
                    </p>
                    <p>
                      <i className={styles.address} />
                      {user.blogAddress || '未知'} 
                    </p>
                  </div>
                  <Divider dashed />
                  <div className={styles.tags}>
                    <div className={styles.tagsTitle}>标签</div>
                    {user.tags.map(item => (
                      <Tag key={item.id}>{item.title}</Tag>
                    ))}
                  </div>
                  <Divider style={{ marginTop: 16 }} dashed />
                  <div className={styles.team}>
                    <div className={styles.teamTitle}>分类</div>
                    <Spin spinning={userLoading}>
                      <Row gutter={36}>
                        {user.categories.map(item => (
                          <Col key={item.id} lg={24} xl={12}>
                            <Link to={`/post/list?c=${item.id}`}>
                              <Avatar size="small" src={item.icon} />
                              {item.name}
                            </Link>
                          </Col>
                        ))}
                      </Row>
                    </Spin>
                  </div>
                </div>
              ) : (
                'loading...'
              )}
            </Card>
          </Col>
          <Col lg={17} md={24}>
            <Card
              className={styles.tabsCard}
              bordered={false}
              tabList={operationTabList}
              activeTabKey={location.pathname.replace(`${match.path}/`, '')}
            >
              {children}
            </Card>
          </Col>
        </Row>
        <BackTop />
      </GridContent>
    );
  }
}

export default Center;
